<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>个人信息</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />


    <style>
    body{
      /*background: rgb(242,242,242);*/
      width:100%;
    }
      #header{
        width:100%;
        font-size: 1.1rem;

        background: white;
        margin-bottom: 0.8rem;
        margin-top:1rem;
        padding-bottom: 1rem;
        display: flex;
        align-items: center;


      }
      #header img{
        width:1rem;
        height: 1rem;
        margin-right: 7.5rem;
        margin-left: 0.8rem;


      }
      ul li{
        width:100%;
        height: 3.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: white;
        margin-top: 0.1rem;
      }
      ul li p{
          padding-left: 1.2rem;
        }


      .head{
        display: flex;
        align-items: center;
      }
      .head span{
        color:#999999;
      }
      .headimg{
        width:2.5rem;
        height:2.5rem;
        background-image: url("../image/a23.png");
        background-size:100% 100%;
        border-radius: 50%;

      }

      .right{
    width:1.2rem;
    height: 1rem;
    padding-right: 1.5rem;
    padding-left: 0.8rem;
      }

      .headpage{
        display: none;
        position: fixed;
        width:100%;
        height: 100%;
        top:0;
        left:0;
        background: rgba(0,0,0,0.4);
        z-index: ;
      }
      .butwrap{
        position: absolute;
        width:90%;
        height: auto;
        bottom: 0.5rem;
        margin-left:5%;
        text-align: center;
      }
      .btn{
        width:100%;
        height: 2.7rem;
        line-height: 2.7rem;
        text-align: center;
        background: rgba(242,242,242,0.7);
        margin-top: 0.8rem;
        font-weight: 500;
        border-radius: 0.1rem;
      }






        .remove{
            position: absolute;
            top:0.8rem;
            left:1.2rem;
        }
        .en{
            position: absolute;
            top:0.8rem;
            right:1.2rem;
        }
        .sex{
          width:100%;
          height: 12rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
        .sex span{
          font-size: 1.2rem;
          padding-bottom: 0.8rem;
        }
        .sextxt{
          font-size: 2rem;
          color:rgb(64,204,203);
        }
        input{
          text-align: right;
          outline: none;
        }
        .button{
          width: 60%;
          margin: 3rem auto;
          background-color: #40cccc;
          color:#fff;
          height: 3rem;
          line-height: 3rem;
          text-align: center;
          border-radius: 1rem;
        }
    </style>
</head>

<body>

  <div id="header">
    <img src="../image/u18.png" onclick="closewin()">
      个人资料
  </div>
  <ul>
    <li>
        <p>头像</p>
         <div class="head" >
            <div class="headimg"  id="head_url" onclick="showAction()"></div>
            <img src="../image/a11.png" class="right">
          </div>
      </li>
      <li>
          <p>昵称</p>
           <div class="head">
              <input type="text" name=""  placeholder="姓名" class="input" id="name">
              <img src="../image/a11.png" class="right">
            </div>
        </li>

          <li>
              <p>生日</p>
               <div>
                  <input  class="mysex" type="text" id="birthday" placeholder="生日" style="text-align:right;color:rgb(64,204,203)" value=>
                  <img src="../image/a11.png" class="right">
                </div>

            </li>


    </ul>
<div class="button" onclick="saves()">
  保存信息
</div>
</body>

<script type="text/javascript" src="../script/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/select.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">

var userinfo=$api.getStorage('userinfo');
var head_img
var nick_name
var birthday

apiready = function() {
        $api.fixStatusBar(
          $api.byId('header')
         );
        api.setStatusBarStyle({
              style: 'dark',
              color:"#ffffff"
            });




            get_user()
}

function get_user() {
  api.ajax({
      url: SITE_URL+'user_api/user/get_info',
      method: 'post',
      data: {
          values: {
              user_id: userinfo.id
          }
      }
  },function(ret, err){
      if (ret) {
        if(ret.error==200){
          document.getElementById('head_url').style.backgroundImage="url('"+ret.data.head_img+"')";
          head_img=ret.data.head_img;
          $("#name").val(ret.data.nick_name)
          name = ret.data.nick_name
          $("#birthday").val(ret.data.birthday)
          birthday = ret.data.birthday

        }else{
          msgcode('获取个人信息失败')
        }
          //alert( JSON.stringify( ret ) );
      } else {
        msgcode('请检查网络连接')
          //alert( JSON.stringify( err ) );
      }
  });

}
function saves() {
  var name = $("#name").val()
  if(name==''){
    msgcode('起个名字吧')
    return false;
  }

  api.ajax({
      url: SITE_URL+'user_api/user/up_user',
      method: 'post',
      data: {
          values: {
              user_id: userinfo.id,
              nick_name:name,
              head_img:head_img,
              birthday:birthday

          }
      }
  },function(ret, err){
      if (ret) {
        if(ret.error==200){
          msgcode('修改成功')
          api.sendEvent({
              name: 'up_user',

          });

          setTimeout(function () {
            api.closeWin({

            });

          },500)

        }else{
          msgcode('修改失败')
        }
          //alert( JSON.stringify( ret ) );
      } else {
        msgcode('请检查网络连接')
          //alert( JSON.stringify( err ) );
      }
  });



}



$(function () {





    $.dateSelector({
          evEle: '.mysex',
          startYear: '1950',
          endYear: '2019',
          timeBoo: false,
          afterAction: function (d1, d2, d3) {
             birthday = d1 + '-' + d2 + '-' + d3;
              $("#birthday").val(birthday)

          }
      });



});









    function showAction() {
        api.actionSheet({
            title: '上传图片',
            cancelTitle: '取消',
            buttons: ['拍照', '从手机相册选择']
        }, function(ret, err) {
            if (ret) {
                getPicture(ret.buttonIndex);
            }
        });
    }

    function getPicture(sourceType) {
        if (sourceType == 1) { // 拍照
                        api.getPicture({
                          sourceType: 'camera',
                          encodingType: 'jpg',
                          mediaValue: 'pic',
                          destinationType: 'url',
                          allowEdit: true,
                          quality: 50,
                          targetWidth: 100,
                          targetHeight: 100,
                          saveToPhotoAlbum: false
                }, function(ret, err) {
                    if (ret) {
                    saveImg(ret.data)
                    //    alert(JSON.stringify(ret));
                    } else {
                      msgcode("请重新选择")
                      //  alert(JSON.stringify(err));

                    }
                });
        } else if (sourceType == 2) { // 从相机中选择
            api.getPicture({
                sourceType: 'library',
                encodingType: 'jpg',
                mediaValue: 'pic',
                destinationType: 'url',
                allowEdit: true,
                quality: 100,
                saveToPhotoAlbum: false
            }, function(ret, err) {
                if (ret) {



                    saveImg(ret.data)
                }
            });
        }
    }

      function saveImg(path) {
        var html =''
        var obj = $api.byId('img_list');
        api.ajax({
            url: SITE_URL+'square_api/fileservice/posting_img',
            method: 'post',
            data: {
                files: {
                    image: path
                }
            }
        },function(ret, err){
            if (ret) {
              if(ret.error==200){
                document.getElementById('head_url').style.backgroundImage="url('"+ret.data+"')";
head_img=ret.data;
              }
    //            alert( JSON.stringify( ret ) );
            } else {
              msgcode('上传失败1张图片')
                //alert( JSON.stringify( err ) );
            }
        });

      }

</script>

</html>
